<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2023-03-02 20:33:08
-->
<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2023-03-02 20:33:08
-->
<template>
    <div class="songres">
        <div v-if="info.songRes.length !== 0">
            <div class="opertor">
                <el-button type='danger' icon="VideoPlay" @click='playAllSong'>播放全部</el-button>
            </div>
            <div class="songCount">
                <span>找到{{ info.songResCount }}单曲</span>
            </div>
            <SongTable :songs="info.songRes"></SongTable>
            <Pagination :total="info.songResCount" :page-size="50" :current-page="info.currentPage"
                @handleCurrentChange="getSearchSongBy"></Pagination>
        </div>
        <div class="nosongres" v-else>
            <el-empty description="数据正在加载~" :image-size="200"></el-empty>
        </div>
    </div>
</template>

<script setup>
import SongTable from '../../../components/SongTable.vue';
import { useRoute, useRouter } from 'vue-router'
import { reactive, onMounted } from 'vue'
import { getSearchSong, getGoodMatch } from '@/api/searchdetail/searchdetail.js'
import Pagination from '../../../components/content/Pagination.vue';
// import mitter from '@/utils/mitt.js'
import { useMusicStore } from '@/store/music.js'
import { getSongUrl } from '@/api/playmusic/playmusic.js'

const music = useMusicStore()
const route = useRoute()
const info = reactive({
    keyword: '',
    songRes: [],
    songResCount: 0,
    currentPage: 1,
})

//获取搜索关键字的单曲内容
async function getSearchSongBy(page = 1) {
    info.currentPage = page
    let offset = (page - 1) * 50
    let res = await getSearchSong(info.keyword, offset)
    if (res.data.code === 200) {
        info.songResCount = res.data.result.songCount
        info.songRes = res.data.result.songs
    }
}

//获取搜索最佳匹配
// async function getGoodMatchBy() {
//     let res = await getGoodMatch(info.keyword)
//     if (res.data.code === 200) {
//         //传递歌手数据
//         mitter.emit('singerDel', res.data.result.artist[0])
//     }
// }

//点击播放全部的按钮回调函数
async function playAllSong() {
    //添加到当前播放列表中
    music.addAllSongs(info.songRes)
    //默认播放第一首歌
    let res = await getSongUrl(info.songRes[0].id)
    // console.log(res);
    if (res.data.code === 200) {
        music.saveSongUrl(res.data.data[0].url)  //保存歌曲的播放地址
        music.SaveSongDetailAndaddHistoryPlayList(info.songRes[0])  //保存歌曲详情信息
        music.changePlayState(true)  //修改音乐播放状态
    }
}


onMounted(() => {
    info.keyword = route.params.keywords
    getSearchSongBy()  //获取单曲
    // getGoodMatchBy()
})
</script>

<style lang="scss" scoped>
.songres {
    position: relative;

    .opertor {
        margin-left: 5px;
        margin-bottom: 5px;
    }

    .songCount {
        position: absolute;
        right: 50px;
        top: 0px;
        font-size: 14px;
        color: #c0bebe;
    }

    .nosongres {
        width: 100%;
        text-align: center;
        font-size: 24px;
        font-weight: 700;
    }
}
</style>